<template>
  <section :class="'login'">
    <img src="../assets/img/login.jpg" class="login-img" height="100%" />
    <div class="form-box">
      <div class="container">
        <p class="hello">HELLO!</p>
        <p class="intro">欢迎您登录手护贝贝智能支持系统</p>
        <ElForm ref="form" :model="form" status-icon class="login-form">
          <ElFormItem label="账号" prop="username">
            <ElInput
              v-model="form.username"
              type="text"
              auto-complete="off"
            ></ElInput>
          </ElFormItem>
          <ElFormItem label="密码" prop="password">
            <ElInput
              v-model="form.password"
              type="password"
              auto-complete="off"
            ></ElInput>
          </ElFormItem>
          <ElFormItem class="verify" label="验证码">
            <ElInput
              v-model="form.verify"
              type="text"
              auto-complete="off"
              class="input-verify"
            ></ElInput>
            <GVerify @code="verfiyCode" />
          </ElFormItem>
          <ElCheckbox v-model="rememberPassword" class="remember-password">
            <span class="remember-pwd">记住密码</span>
          </ElCheckbox>
          <div class="forget-password" @click="forget">忘记密码？</div>
          <ElFormItem class="submit">
            <ElButton class="submit-button" type="primary" @click="login"
              >提交</ElButton
            >
          </ElFormItem>
        </ElForm>
      </div>
    </div>
  </section>
</template>

<script>
import _ from 'lodash';
import Cookie from 'js-cookie';
import GVerify from '@/components/util/verify.vue';
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  name: 'Login',
  components: {GVerify},
  data() {
    return {
      code: '',
      rememberPassword: true,
      form: {
        username: '',
        password: '',
        verify: ''
      }
    };
  },
  watch: {
    rememberPassword(isRemember) {
      if (!isRemember) window.localStorage.removeItem('password');
    }
  },
  beforeMount() {
    try {
      const username = JSON.parse(window.localStorage.getItem('username'));
      if (username) {
        this.form = {
          ...this.form,
          ...username
        };
        return;
      }
      const auth = JSON.parse(window.localStorage.getItem('password'));
      this.form = {
        ...this.form,
        ...auth
      };
      // this.rememberPassword = !!auth;
      // eslint-disable-next-line no-empty
    } catch (e) {}
  },
  methods: {
    verfiyCode(code) {
      this.code = code;
    },
    login() {
      const allIsCheck =
        this.form.username && this.form.password && this.form.verify;
      if (!allIsCheck) {
        this.$message({
          message: '选项不能为空',
          duration: 5000,
          type: 'error'
        });
        return;
      }
      if (this.form.verify !== this.code) {
        this.$message({
          message: '验证码不正确',
          duration: 5000,
          type: 'error'
        });
        return;
      }
      if (this.rememberPassword) {
        window.localStorage.removeItem('username');
        window.localStorage.setItem(
          'password',
          JSON.stringify(_.pick(this.form, 'username', 'password'))
        );
      }
      http
        .post(url.login, {
          username: this.form.username,
          password: this.form.password
        })
        .then(res => {
          Cookie.set('token', res.token);
          this.$router.push('/');
        })
        .catch(catchAppError);
    },
    forget() {
      // window.location.href = '/forget';
      this.$router.push('/reset-password');
    }
  }
};
</script>

<style lang="scss" module="s">
:global {
  .login {
    height: 100%;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    .login-img {
      width: 93.5vh;
    }
    .form-box {
      position: absolute;
      left: 93.5vh;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      .el-input__inner {
        height: 44px;
        line-height: 44px;
        border-radius: 0;
        border-color: #b3b3b3;
      }
      .hello {
        font-weight: bold;
        font-size: 30px;
      }

      .login-form,
      .hello {
        width: 320px;
        margin-left: 70px;
      }
      .remember-pwd {
        font-size: 16px;
      }
      .intro {
        width: 320px;
        font-size: 20px;
        margin-left: 70px;
      }

      .login-form {
        position: relative;
        .submit {
          position: relative;
          z-index: 1;
        }
        .submit-button {
          width: 166px;
          height: 50px;
          font-size: 16px;
          margin-top: 30px;
          background-color: #4b90ff;
          color: #fff;
        }
        .el-form-item__label {
          float: none;
          font-size: 16px;
          text-align: left;
        }
        .el-form-item__content {
          margin-left: 0 !important;
        }
        .remember-password {
          color: #999;
          position: absolute;
          z-index: 2;
          left: 0;
          &:hover {
            cursor: pointer;
          }
        }

        .forget-password {
          color: #999;
          position: absolute;
          right: 0;
          z-index: 2;
          &:hover {
            cursor: pointer;
          }
        }
        .verify {
          .input-verify {
            width: 197px;
            border-right: 0;
          }
          canvas {
            display: inline-block;
            vertical-align: top;
            border: 1px solid #b3b3b3;
            border-left: 0;
          }
        }
      }
    }
  }
}
</style>
